<template>
  <el-dialog
    :title="title"
    v-model="model"
    width="600px"
    :before-close="closeHandle"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="小区名称" prop="communityId">
        <communitySelect v-model="form.communityId" @change="communityChange" />
      </el-form-item>
      <el-form-item label="收费项目" prop="name">
        <el-input v-model="form.name" placeholder="请输入收费项目名称" />
      </el-form-item>
      <el-form-item label="计费单价" prop="amount">
        <el-input
          v-model="form.amount"
          type="number"
          placeholder="请输入计费单价"
        />
      </el-form-item>
      <el-form-item label="计费单位" prop="unit">
        <el-select v-model="form.unit" placeholder="请选择计费单位">
          <el-option label="元/平方米" value="元/平方米" />
          <el-option label="元/户" value="元/户" />
          <el-option label="元/车位" value="元/车位" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div>
        <el-button @click="model = false">取 消</el-button>
        <el-button v-if="!isEdit" type="primary" @click="submitForm"
          >确 定</el-button
        >
        <el-button v-if="isEdit" type="primary" @click="submitForm"
          >保 存</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="chargeStandardAddEdit">
import { ref, reactive, computed } from "vue";
import communitySelect from "@/components/communitySelect";
import { ElMessage } from "element-plus";
import {
  saveChargingStandard,
  updateChargingStandard,
} from "@/api/realEstateManage";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  row: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref();
const isEdit = computed(() => !!props.row.id);

const emit = defineEmits(["submit"]);
const model = defineModel({
  default: false,
});

const form = ref({
  communityId: "",
  communityName: "",
  name: "",
  amount: "",
  unit: "",
  remark: "",
});

const rules = reactive({
  communityId: [{ required: true, message: "请选择小区" }],
  name: [{ required: true, message: "请输入收费项目名称" }],
  amount: [{ required: true, message: "请输入计费单价" }],
  unit: [{ required: true, message: "请选择计费单位" }],
});

onMounted(() => {
  if (isEdit.value) {
    form.value = { ...props.row };
  }
});

const communityChange = (value, item) => {
  form.value.communityId = item.id;
  form.value.communityName = item.name;
};
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const params = { ...form.value };
      if (isEdit.value) {
        params.id = props.row.id;
      }
      const api = isEdit.value ? updateChargingStandard : saveChargingStandard;
      api(params).then(({ data }) => {
        if (data) {
          ElMessage({
            message: isEdit.value ? "编辑成功" : "添加成功",
            type: "success",
          });
          model.value = false;
          emit("submit", form.value);
        }
      });
    }
  });
};
</script>

<style scoped>
.el-input-number {
  width: 100%;
}
</style>
